<template>
	<div class="goods-zero">
		<div class="goods-tabs">
			<div class="tabs-list">
				<div :class="[{ active: type === 'progress' }, 'tabs-item']" @click="tabChange('progress')">进行中</div>
				<div :class="[{ active: type === 'soon' }, 'tabs-item']" @click="tabChange('soon')">即将开始</div>
			</div>

			<!--进行中列表-->
			<div class="progress-list" v-if="type === 'progress'">
				<div class="count-down">
					<van-count-down time="60000" format="HH:mm:ss后结束" />
					<p><i class="iconfont icon-qiangwanjizhi"></i>抢完即止</p>
				</div>
				<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" @load="loadMore" finished-text="没有更多了" loading-text="拼命加载中">
						<div class="goods-list" v-if="goodsList.length > 0">
							<div class="goods-wrap" v-for="(item, index) in goodsList" :key="index">
								<goods-item ref="goodsItem" :item="item"></goods-item>
							</div>
						</div>

						<!--骨架屏-->
						<van-skeleton
							v-for="i in 3"
							:key="'i' + i"
							:row-width="['100%', '60%', '30%', '100%']"
							avatar
							avatar-size="120px"
							avatar-shape="square"
							:row="4"
							:loading="loading"
						></van-skeleton>
					</van-list>
				</van-pull-refresh>
			</div>

			<!--即将开始列表-->
			<div class="soon-list" v-if="type === 'soon'">
				<div class="count-down">
					<van-count-down time="600000" format="HH:mm:ss后开始" />
					<p><i class="iconfont icon-qiangwanjizhi"></i>敬请期待</p>
				</div>
				<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" @load="loadMore" finished-text="没有更多了" loading-text="拼命加载中">
						<div class="goods-list" v-if="goodsList.length > 0">
							<div class="goods-wrap" v-for="(item, index) in goodsList" :key="index">
								<goods-item ref="goodsItem" :item="item"></goods-item>
							</div>
						</div>

						<!--骨架屏-->
						<van-skeleton
							v-for="i in 3"
							:key="'i' + i"
							:row-width="['100%', '60%', '30%', '100%']"
							avatar
							avatar-size="120px"
							avatar-shape="square"
							:row="4"
							:loading="loading"
						></van-skeleton>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
import { CountDown, PullRefresh, List, Skeleton } from 'vant';
import { GoodsItem } from './components';
export default {
	name: 'special-zero',
	components: {
		GoodsItem,
		'van-count-down': CountDown,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-skeleton': Skeleton
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			type: 'progress',
			goodsList: [],
			params: {
				page: 1,
				size: 20,
			},
		};
	},
	methods: {
		// tab切换重置数据
		tabChange(type) {
			if (this.type === type) {
				return false;
			}
			this.type = type;
			this.goodsList = [];
			this.isRefresh = false;
			this.params.page = 1;
			this.loading = true;
			this.finished = false;
			// 根据type筛选商品
			this.loadMore();
		},
		// 下拉刷新
		onRefresh() {
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore('refresh');
		},
		// 追加数据
		loadMore(operate) {
			this.$service.shopping.goods.page(this.params).then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				// 加载状态结束
				this.loading = false;
				this.params.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 数据全部加载完成
				if (this.goodsList.length === 0) {
					this.error = true;
				} else if (this.goodsList.length >= res.pagination.total) {
					this.finished = true;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-zero {
	background: #FD2E3D url('../../../assets/images/index/special/zero-background.png') no-repeat top;
	background-size: 100%;
	width: 100%;
	min-height: 100%;
	padding-top: 258px;
	padding-bottom: 25px;
	.goods-tabs {
		width: 700px;
		padding: 26px 0 10px;
		margin: 0 auto;
		border-radius: 32px;
		background: $color-white;
		.tabs-list {
			margin-bottom: 20px;
			@include flexBox(space-around);
			.tabs-item {
				width: 148px;
				line-height: 50px;
				text-align: center;
				border-radius: 50px;
				background: #ebebeb;
				color: #7b7b7b;
				font-size: 28px;
				transition: 0.5s;
				&.active {
					color: $color-white;
					background: linear-gradient(#ff484a, #ff5049);
				}
			}
		}
		.progress-list,
		.soon-list {
			.count-down {
				width: 100%;
				line-height: 70px;
				padding: 0 32px;
				background: #fff4f4;
				color: $main-color;
				font-size: 28px;
				@include flexBox(space-between);
				/deep/.van-count-down {
					color: $main-color;
					font-size: 28px;
				}
				p {
					@include flexBox(null, center);
					i {
						margin-right: 10px;
						font-size: 36px;
					}
				}
			}
			.van-list {
				min-height: 850px;
				padding: 18px 24px;
				.goods-list {
					margin-bottom: 30px;
					.goods-wrap {
						padding-top: 30px;
						margin-top: 30px;
						border-top: 2px solid #e2e2e2;
						&:first-child {
							padding-top: 0;
							margin-top: 0;
							border-top: none;
						}
						&:last-child {
							margin-bottom: 30px;
						}
					}
				}
				.van-skeleton {
					margin-bottom: 30px;
					padding: 0 0 30px 0;
					border-bottom: 2px dotted #f2f3f5;
					.van-skeleton__avatar {
						width: 37% !important;
						height: 0 !important;
						padding-bottom: 37%;
						border-radius: 20px;
					}
					.van-skeleton__content {
						padding-top: 0;
						@include flexBox(space-between, null, column);
					}
				}
			}
		}
	}
}
</style>
